<template>
  <l-layout class="l-tab-page">
    <l-panel :title="$t('级联组件')">
      <div style="width: 480px;margin: auto;padding-top: 32px; " >
        <el-form size="mini" labelPosition="left" labelWidth="140px">
          <el-form-item label="点击触发子菜单">
            <el-cascader :options="options" />
          </el-form-item>

          <el-form-item label="移入触发子菜单">
            <el-cascader
              :options="options"
              :props="{ expandTrigger: 'hover' }"
            />
          </el-form-item>

          <el-form-item label="可清除选项功能">
            <el-cascader :options="options" clearable />
          </el-form-item>

          <el-form-item label="只显示最后一级">
            <el-cascader :options="options" :show-all-levels="false" />
          </el-form-item>

          <el-form-item label="多选( 显示所有 )">
            <el-cascader :options="options" :props="{ multiple: 'true' }" />
          </el-form-item>

          <el-form-item label="多选( 折叠显示 )">
            <el-cascader
              :options="options"
              :props="{ multiple: 'true' }"
              collapse-tags
            />
          </el-form-item>

          <el-form-item label="单选( 任意一级 )">
            <el-cascader :options="options" :props="{ checkStrictly: true }" />
          </el-form-item>

          <el-form-item label=" 多选( 任意一级 )">
            <el-cascader
              :options="options"
              :props="{ multiple: true, checkStrictly: true }"
            />
          </el-form-item>

          <el-form-item label="动态加载功能">
            <el-cascader :props="props" />
          </el-form-item>

          <el-form-item label="显示下级数量">
            <el-cascader :options="options">
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-form-item>

          <el-form-item label="可搜索功能">
            <el-cascader
              placeholder="试试搜索：苏州"
              :options="options"
              filterable
            />
          </el-form-item>
        </el-form>
      </div>
    </l-panel>
  </l-layout>
</template>

<script>
let id = 0;
export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2,
              indexs: item,
            }));
            resolve(nodes);
          }, 1000);
        },
      },
      options: [
        {
          value: 1,
          label: "东南",
          children: [
            {
              value: 2,
              label: "上海",
              children: [
                { value: 3, label: "普陀" },
                { value: 4, label: "黄埔" },
                { value: 5, label: "徐汇" },
              ],
            },
            {
              value: 7,
              label: "江苏",
              children: [
                { value: 8, label: "南京" },
                { value: 9, label: "苏州" },
                { value: 10, label: "无锡" },
              ],
            },
            {
              value: 12,
              label: "浙江",
              children: [
                { value: 13, label: "杭州" },
                { value: 14, label: "宁波" },
                { value: 15, label: "嘉兴" },
                { value: 30, disabled: true, label: "不可选" },
              ],
            },
          ],
        },
        {
          value: 17,
          label: "西北",
          children: [
            {
              value: 18,
              label: "陕西",
              children: [
                { value: 19, label: "西安" },
                { value: 20, label: "延安" },
              ],
            },
            {
              value: 21,
              label: "新疆维吾尔族自治区",
              children: [
                { value: 22, label: "乌鲁木齐" },
                { value: 23, label: "克拉玛依" },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>
